 <template>
  <div class="w rank">
    <div class="rank-wrapper" v-if="list.length">
        <div class="rank-container" v-for="item in list">
            <div class="title">{{item.acr034}}</div>
            <div class="title">{{item.acr002}}</div>
            <div class="title">{{item.acr013}}{{ignorecount}}</div>
            <div class="title">{{item.acr013}}{{ignorecount}}</div><div class="title">{{item.acr013}}{{ignorecount}}</div><div class="title">{{item.acr013}}{{ignorecount}}</div>
        </div>
        <button></button>
    </div>  
    <ani-one></ani-one>
    <ani-two></ani-two>
    <artmsg v-show="isShow" @isShow='isShow=false'></artmsg>
  </div>
</template>

<script type="text/ecmascript-6">
import {getZcList} from 'api/index-service'
import {ERR_OK} from 'api/config'
import AniOne from 'test/animation/ani-one'
import AniTwo from 'test/animation/ani-two'
import Artmsg from 'base/artmsg/artmsg'

export default {
    data() {
        return {
            isShow :  false,
            list : [],
            ignorecount:''
        }
    },
    created(){
        this._getData();
    },
    methods: {
        emitHide() {
            this.isShow = false
        },
        showDetail() {
            this.isShow = true;
        },
        _getData() {
            getZcList().then((res) => {
                if (res.statusCode === ERR_OK) {
                    let pageresult=res.result.pageresult;
                    this.list = pageresult.data;
                    this.ignorecount=pageresult.ignorecount;
                }
            })
        }
    },
    components: {
        AniOne,
        AniTwo,
        Artmsg
    } 
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.rank 
    margin-top 50px
    .bank
        width 240px
        height 40px
        line-height 40px
        text-align center
        background #ddd
        cursor pointer
        .rank-container
            margin-bottom 50px
    
</style>